{% extends "templates/base.phtml" %}
{%block content%}
{% if wxc is defined %}
<!-- PAGE CONTENT WRAPPER -->

<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="/admin/appvote">投票列表</a></li>
                    <li class="active"><a href="/admin/appvote">新建投票</a></li>
                </ul>
                <div class="panel-body tab-content">
                    <div class="tab-pane active">
                        <div class="col-md-12">
                            <h3>新建投票</h3>

                            <div class="col-md-2 col-xs-2 pull-right">
                                <a class="btn btn-success back" href="/admin/appvote">返回</a>
                            </div>
                            <div class="form-horizontal">
                                <div class="panel panel-default">
                                    <div class="panel-body def-pan-bd">
                                        <div class="col-bd col-md-12 col-xs-12">
                                            <div class="col-md-12 form-horizontal">
                                                <!-- 新建投票-->
                                                <form action="/admin/appvote/create" class="form-horizontal"
                                                      method="post">

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">标题：</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span
                                                                        class="fa fa-pencil"></span></span>
                                                                <input name="name" type="text" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">封面图片：</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <input class="J-fileup" id="fileup" name="fileup"
                                                                   type="file" multiple="true">
                                                            <input id="pic" name="pic" class="form-control"
                                                                   type="hidden" value="">
                                                            <img id="thumb" src="" style="max-height: 200px;max-width: 200px">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">详情：</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <textarea id="detail" name="detail" class="form-control"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">截止时间：</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span
                                                                        class="fa fa-calendar"></span></span>
                                                                <input name="time_end" type="text"
                                                                       class="form-control datepicker"
                                                                       value="">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">选择类型：</label>

                                                        <div class="col-md-6 col-xs-12">

                                                            <div class="checkbox">
                                                                <input type="radio" value="1" id="type_0"
                                                                       class="regular-radio" name="type">
                                                                <label for="type_0">"单选" </label>
                                                            </div>

                                                            <div class="checkbox">
                                                                <input type="radio" value="2" id="type_1"
                                                                       class="regular-radio" name="type">
                                                                <label for="type_1">"多选"</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">文字/图片投票：</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <select class="J-state" id="state" name="state">
                                                                <option selected="selected" value="1">文字投票</option>
                                                                <option value="2">图片投票</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <a>选项</a>
                                                    <table class="table table-bordered">
                                                        <thead>
                                                        <tr>
                                                            <th id="option_pic_words" style="display:none">图片</th>
                                                            <th>排序</th>
                                                            <th>标题</th>
                                                            <th>描述</th>
                                                            <th>操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody class="J-tbody">

                                                        <!--                                                        <tr class="J-tr">-->
                                                        <!--                                                            <td class="J-pic" name="option_pic" style="height:120px;width:120px;display: none">-->
                                                        <!--                                                                <input  id="fileup1" type="file" multiple="true" >-->
                                                        <!--                                                                <input id ="pic1" name="option_pic[]" class="form-control"  type="hidden" >-->
                                                        <!--                                                            </td>-->
                                                        <!--                                                            <td>-->
                                                        <!--                                                                <input name="order[]" type="text" class="form-control" value="1">-->
                                                        <!--                                                            </td>-->
                                                        <!--                                                            <td>-->
                                                        <!--                                                                <input   name="option_name[]"type="text" class="form-control">-->
                                                        <!--                                                            </td>-->
                                                        <!---->
                                                        <!--                                                            <td>-->
                                                        <!--                                                                <button class="btn btn-danger J-delete">删除</button>-->
                                                        <!--                                                            </td>-->
                                                        <!--                                                        </tr>-->

                                                        </tbody>

                                                    </table>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">&nbsp;</label>
                                                        <a class="btn btn-success J-add">增加</a>
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <div class="col-md-6 col-xs-12 col-md-offset-4">
                                                            <button class="btn btn-primary ">提交</button>
                                                        </div>
                                                    </div>

                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{%endif%}
{%endblock%}
{%block end%}
<style>
    .add {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px
    }
</style>


<script src="/assets/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/assets/uploadify/uploadify.css">
<script type="text/javascript">


    $(function () {
        $(".J-fileup").each(function () {
            $(this).uploadify({
                'formData': {},
                'swf': '/assets/uploadify/uploadify.swf',
                'uploader': '/admin/resource/upload',
                'cancelImg': '/assets/uploadify/uploadify-cancel.png',//单个取消上传的图片
                'onUploadSuccess': function (file, data, response) {
                    var data = JSON.parse(data);
                    if (data.status == 1) {
                        $('#pic').val(data.data);
                        $('#thumb').attr("src",data.data);
                        $('#thumb').css("display","block");
                    }

                }
            });
        });
    });


</script>


<script type="application/javascript">
    var count = 0;
    //添加、删除
    $(document).ready(function () {


        //改变
        $(".J-state").click(function () {
            var state = document.getElementById("state").value;
            if (state == 1) {
                document.getElementById("option_pic_words").style.display = "none";
                var pics = document.getElementsByClassName("J-pic");
                for (var i = 0; i < pics.length; ++i) {
                    pics[i].style.display = "none";
                }
            }
            else if (state == 2) {
                document.getElementById("option_pic_words").style.display = 'table-cell';

                var pics2 = document.getElementsByClassName("J-pic");
                for (var j = 0; j < pics2.length; ++j) {
                    pics2[j].style.display = "table-cell";
                }
            }
        });


        //添加
        $(".J-add").click(function () {
            count++;
            var state = document.getElementById("state").value;
            var disp;
            if (state == 1) {
                disp = "none";
            }
            else if (state == 2) {
                disp = "table-cell";
            }
            option = '<tr class="J-tr"><td class="J-pic" name="option_pic"style="height:120px;width:120px;display: ' + disp + '"> <input class="J-fileup"  id="fileup' + count + '"  name="pic[' + count + ']"type="file" multiple="true" > <input id ="pic' + count + '" name="option_pic[]" class="form-control"  type="hidden" > <div style="height:120px;width:120px ;  "><img id="preview' + count +' " src="" style="max-height: 120px;max-width: 120px"> </div></td> <td style="text-align:center"><input name="order[]" type="hidden" class="form-control" value="'+count+'"><p>'+count+'</p></td> <td><input name="option_name[]" type="text" class="form-control"> </td><td><textarea name="option_detail[]" class="form-control" style="resize:vertical"></textarea></td><td> <button class="btn btn-danger J-delete">删除</button> </td> </tr>';
            $(".J-tbody").append(option);

                $(".J-fileup").uploadify({
                    'formData': {},
                    'swf': '/assets/uploadify/uploadify.swf',
                    'uploader': '/admin/resource/upload',
                    'cancelImg': '/assets/uploadify/uploadify-cancel.png',//单个取消上传的图片
                    'onUploadSuccess': function (file, data, response) {
                        var data = JSON.parse(data);
                        if (data.status == 1) {
                            var btn=$(this)['0']['button']['0'];
                            var Sbtn=btn.getAttribute("id");
                            var indexEnd=Sbtn.indexOf("-button");
                            var idStr=Sbtn.substr(0,indexEnd);
                            document.getElementById(idStr).nextElementSibling.nextElementSibling.value=data.data; //set value to pic[]
                            $('#'+idStr).next().next().next().children().attr("src",data.data);
                            $('#'+idStr).next().next().next().children().css("display","block");
                        }
                    }
                });
//            });
        });


        //删除
        $("body").on("click", ".J-delete", function () {
            count--;
            $(this).parent().parent().remove();
        });

    });
</script>

<!-- END PAGE CONTENT WRAPPER -->
{%endblock%}